<script setup>
import { reactive, ref, watch } from 'vue';

    const num = ref(0)
    // 监视单个属性
    watch(num, (newValue, oldValue) => {
        alert(`监视到num的值变化，new:${newValue},old:${oldValue}`)
    })
    const user = reactive({
        name: 'lisi',
        age: 18,
        score: {
            id: '001',
            count: 98
        }
    })
    watch(()=>user.age, (newValue, oldValue) => {
        alert(`监视到user.age的值变化，new:${newValue},old:${oldValue}`)
    })
    // 监测多个数据
    watch([num, ()=>user.age], ([newNum, newAge],[oldNum,oldAge]) => {
        alert(`num或者age变化了，[newNum:${newNum}, newAge:${newAge}],[oldNum:${oldNum},oldAge:${oldAge}]`)
    })

    // immediate
    // watch(num, (newValue, oldValue) => {
    //     alert(`immediate监视到num的值变化，new:${newValue},old:${oldValue}`)
    // },{
    //     immediate: true
    // })
    // 深度监视
    watch(()=>user.score.count, (newValue, oldValue) => {
        alert(`deep监视到score的值变化，new:${newValue},old:${oldValue}`)
    },{
        deep: true
    })
</script>

<template>
    <button @click="num++">修改num</button>
    <h1>age: {{ user.age }}</h1>
    <button @click="user.age++">修改age</button>
    <button @click="user.score.count++">修改score</button>
</template>